<template>
	<view class="nearby-block">
		<view class="search-option center">
			<view class="city-block center">
				<view class="address center">
					<image :src="addressIcon" class="auto-img"></image>
				</view>
				<view class="city-name">长沙市</view>
				<!-- <view class="icon   center">
					<image :src="sanjiaoIcon" class="auto-img"></image>
				</view> -->
			</view>
			<view class="detail center">
				<view class="search-icon center  ">
					<image :src="searchIcon" class="auto-img"></image>
				</view>
				<input class="input-class" type="text" :placeholder="plac" />
			</view>
		</view>
	<!-- 	<view class="now-address">
			<view class="now-hint center">
				<text class="now-txt">当前位置</text>
				<text class="reset">重新定位</text>
			</view>
			<view class="address-txt">马王堆南路与人民东路交汇处</view>
		</view> -->
		<view class="hint-view"></view>
		
		<block v-for="(item,index) in nearbyLst" :key="index">
			<view class="shop-item center" @tap="itemClick(item)">
				<view class="info">
					<view class="name">
						{{item.station_name}}
					</view>
					<view class="bottom-info center">
						<view class="nums">{{distance(item.distance)}}千米</view>
						<view class="address-detail">
							{{item.station_site}}
						</view>
					</view>
				</view>
				
				<view class="right-icon  center" @click="itemClick(item)">
					<image :src="goIcon" class="auto-img"></image>
				</view>
				
			</view>
		</block>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				addressIcon: require('@/static/index/address.png'),
				plac: '输入搜索门店名称',
				searchIcon: require('@/static/nearby/search.png'),
				goIcon: require('@/static/nearby/go.png'),
				sanjiaoIcon: require('@/static/public/sanjiao.png'),
				nearbyLst: [],
				latitude:'',
				longitude:'',
			}
		},
		onShow() {
			this.initAddress()
		},
		computed:{
			distance(){
				return item=>{
					let str=Number(item)
					return str/1000
				}
			}
		},
		methods: {
			init() {
				this.$http('address.getStationList', {
					latitude: this.latitude,
					longitude: this.longitude
				}).then(res => {
					if (res.code == 200) {
						this.nearbyLst = res.data.list
					}
				})

			},
			initAddress(){
				let that=this
				uni.getLocation({
					type: 'wgs84',
					success: function (res) {
						console.log('res',res)
						that.latitude=res.latitude
						that.longitude=res.longitude
						that.init()
					},
					fail:(err)=> {
						 console.log('err',err)
					}
				});
			},
			itemClick(item){
				let shopAddress=item.station_name
				uni.setStorageSync('shopAddress',shopAddress)
				uni.navigateBack()
			},
			 
		}
	}
</script>

<style lang="scss" scoped>
	.nearby-block {}

	.search-option {
		margin-top: 32rpx;
		height: 80rpx;
		padding: 0 24rpx;

		.city-block {
			.address {
				width: 32rpx;
				height: 32rpx;
			}

			.city-name {
				font-size: 28rpx;
				padding: 0 12rpx;

			}

			.icon {
				width: 20rpx;
				height: 16rpx;
			}
		}

		.detail {
			flex: auto;
			height: 100%;
			margin-left: 32rpx;
			border-radius: 8rpx;
			background: #F5F5F5;

			.search-icon {
				margin-left: 24rpx;
				width: 32rpx;
				height: 32rpx;
			}

			.input-class {
				font-size: 28rpx;
				margin-left: 20rpx;
				height: 60rpx;
				width: auto;
			}
		}
	}

	.now-address {
		margin-top: 24rpx;
		padding: 0 24rpx;
		font-size: 28rpx;

		.now-hint {
			justify-content: space-between;

			.now-txt {
				font-weight: 500;
				flex: auto;
			}

			.reset {
				flex: none;
				font-weight: 500;
				color: rgba(203, 60, 40, 1)
			}
		}

		.address-txt {
			margin-top: 24rpx;
		}
	}

	.hint-view {
		margin-top: 34rpx;
		background: #F5F5F5;
		height: 30rpx;
	}

	.shop-item {
		padding: 24rpx 0;
		margin: 0 24rpx;
		border-bottom: 1rpx solid #F5F5F5;

		.info {
			flex: auto;
			width: 500rpx;

			.name {
				font-size: 28rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.bottom-info {
				font-size: 24rpx;
				margin-top: 12rpx;
				color: #999;

				.nums {
					flex: none;
				}

				.address-detail {
					position: relative;
					padding-left: 24rpx;
					flex: auto;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.address-detail::before {
					content: '';
					position: absolute;
					left: 10rpx;
					top: 6rpx;
					bottom: 0;
					width: 2rpx;
					height: 20rpx;
					background: #999;
				}
			}
		}

		.right-icon {
			flex: none;
			width: 48rpx;
			height: 48rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 50%;
			background: #F5F5F5;
			padding: 12rpx;

		}
	}
</style>
